<template>
  <div
    :style="wrapperStyle"
    class="miva-slider__button-wrapper"
    @mousedown="onButtonDown"
    @touchstart="onButtonDown"
    ref="button"
  >
    <div class="item-tip">{{value}}</div>
  </div>
</template>

<script>
export default {
  name: 'MVSliderButton',
  props: {
    value: {
      type: Number,
      default: 0,
    },
    vertical: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dragging: false,
      isClick: false,
      startX: 0,
      currentX: 0,
      startY: 0,
      currentY: 0,
      startPosition: 0,
      newPosition: 0,
    };
  },
  computed: {
    currentPosition() {
      const path = this.value;
      return `${path}%`;
    },
    wrapperStyle() {
      return this.vertical
        ? { bottom: this.currentPosition }
        : { left: this.currentPosition };
    },
  },
  methods: {
    onButtonDown(event) {
      event.preventDefault();
      this.onDragStart(event);
      window.addEventListener('mousemove', this.onDragging);
      window.addEventListener('touchmove', this.onDragging);
      window.addEventListener('mouseup', this.onDragEnd);
      window.addEventListener('touchend', this.onDragEnd);
      window.addEventListener('contextmenu', this.onDragEnd);
    },
    onDragStart(event) {
      this.dragging = true;
      this.isClick = true;
      if (event.type === 'touchstart') {
        event.clientY = event.touches[0].clientY;
        event.clientX = event.touches[0].clientX;
      }
      if (this.vertical) {
        this.startY = event.clientY;
      } else {
        this.startX = event.clientX;
      }
      this.startPosition = parseFloat(this.value);
      this.newPosition = this.startPosition;
    },
    onDragging(event) {
      if (this.dragging) {
        this.isClick = false;
        if (event.type === 'touchmove') {
          event.clientY = event.touches[0].clientY;
          event.clientX = event.touches[0].clientX;
        }
        let diff = 0;
        if (this.vertical) {
          this.currentY = event.clientY;
          diff = this.startY - this.currentY;
        } else {
          diff = this.startX - this.currentX;
        }
        console.log('diff', diff);
        let newPosition = this.startPosition + diff;
        if (newPosition < 0) {
          newPosition = 0;
        } else if (newPosition > 100) {
          newPosition = 100;
        }
        this.newPosition = newPosition;
        this.setPosition(this.newPosition);
        this.$emit('input', newPosition);
      }
    },
    onDragEnd() {
      if (this.dragging) {
        setTimeout(() => {
          this.dragging = false;
          if (!this.isClick) {
            this.setPosition(this.newPosition);
          }
        }, 0);
        window.removeEventListener('mousemove', this.onDragging);
        window.removeEventListener('touchmove', this.onDragging);
        window.removeEventListener('mouseup', this.onDragEnd);
        window.removeEventListener('touchend', this.onDragEnd);
        window.removeEventListener('contextmenu', this.onDragEnd);
        console.log(this.newPosition);
      }
    },
    setPosition(newPosition) {
      if (newPosition === null || Number.isNaN(newPosition)) return;
      if (newPosition < 0) {
        newPosition = 0;
      } else if (newPosition > 100) {
        newPosition = 100;
      }
    },
  },
};
</script>


<style lang="less" scoped>
@import '~@/styles/variables.less';

.miva-slider__button-wrapper {
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: 0%;
  left: 50%;
  z-index: 2;
  transform: translateY(50%) translateX(-50%);
  border: 3px solid #fff;
  border-radius: 50%;
  background-color: @player-progress-btn;
  box-shadow: 0 0 2px darken(@player-progress-btn, 20%);
  cursor: pointer;
  &:active {
    .item-tip {
      display: block;
    }
  }
  .item-tip {
    display: none;
    position: absolute;
    right: 100%;
    top: 0;
    transform: translate(-150%, -50%);
    padding: 0 5px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
      border: 5px solid transparent;
      border-left-color: rgba(0, 0, 0, 0.5);
    }
  }
}
</style>
